<template>
  <div class="detail">
    <van-nav-bar title="面经详情" left-arrow @click-left="fn" />
    <van-skeleton :row="10" :loading="loading">
      <h1>{{ obj.stem }}</h1>
      <div class="info">
        <span>{{ obj.createdAt }}</span>
        <span>|</span>
        <span>{{ obj.views }} 浏览量</span>
        <span>|</span>
        <span>{{ obj.likeCount }} 点赞数</span>
      </div>

      <div class="qian">
        <img :src="obj.avatar" alt="" />
        <span>{{ obj.creator }}</span>
      </div>
      <div class="content" v-html="obj.content"></div>
      <div class="opt">
        <van-icon
          name="like-o"
          :class="{ icon: true, active: obj.likeFlag }"
          @click="onlike"
        />
        <van-icon
          name="star-o"
          :class="{ icon: true, active: obj.collectFlag }"
          @click="oncollect"
        />
      </div>
    </van-skeleton>
  </div>
</template>
  
<script>
import { ArticleApi } from "@/api";

export default {
  name: "HmDetail",
  methods: {
    fn() {
      this.$router.back();
    },
    onlike() {
      ArticleApi.optArticle(this.id, 1).then(() => {
        this.obj.likeFlag = !this.obj.likeFlag;
      });
    },
    oncollect() {
      ArticleApi.optArticle(this.id, 2).then(() => {
        this.obj.collectFlag = !this.obj.collectFlag;
      });
    },

    getList() {
      ArticleApi.getArticleDetail(this.id).then((res) => {
        this.obj = res.data.data;
        this.loading = false;
      });
    },
  },
  data() {
    return {
      id: 0,
      obj: {}, //文章详情对象
      loading: false,
    };
  },
  created() {
    this.id = this.$route.query.id;
    this.loading = true;
    this.getList();
  },
};
</script>
  
<style lang="less" scoped>
.detail {
  .qian {
    display: flex;
    align-items: center;

    img {
      width: 30px;
      aspect-ratio: 1;
      border-radius: 50%;
    }
  }

  .content {
    text-indent: 2em;
  }

  .opt {
    position: fixed;
    right: 0;
    bottom: (100 / @vw);
    width: (120 / @vw);
    .icon {
      width: (40 / @vw);
      line-height: (40 / @vw);
      aspect-ratio: 1;
      text-align: center;
      margin-right: (20 / @vw);
      font-size: (20 / @vw);
      border-radius: (100 / @vw);
      color: black;
      box-shadow: (2 / @vw) (2 / @vw) (10 / @vw) #ccc;
    }
    .active {
      color: #fff;
      background-color: #fec635;
    }
  }
}
</style>
